<template>
  <div class="rainfall_list">
    <div class="query_title">查询</div>
    <div class="query">
      <div class="really">
        <div class="time1">
          <span>日期</span>
          <el-date-picker v-model="value1" style="width:120px" type="date" placeholder="选择日期">
          </el-date-picker>
          <el-time-select v-model="values1" style="width:65px" :picker-options="{
            start: '00:00',
            step: '01:00',
            end: '23:00'
          }" placeholder="选择时间">
          </el-time-select>
          <span>时</span>
        </div>
        <div class="time2">
          <el-checkbox v-model="checked1"></el-checkbox>
          <span>至</span>
          <el-date-picker v-model="value2" style="width:120px" type="date" placeholder="选择日期">
          </el-date-picker>
          <el-time-select v-model="values2" style="width:65px" :picker-options="{
            start: '00:00',
            step: '01:00',
            end: '23:00'
          }" placeholder="选择时间">
          </el-time-select>
          <span>时</span>
        </div>
        <div class="radio">
          <el-radio v-model="radio" label="1">流域</el-radio>
          <el-radio v-model="radio" label="2">行政区划</el-radio>
        </div>
        <div class="btn">
          <div class="check">
            <el-checkbox v-model="checked2"></el-checkbox>
            <span>列表</span>
          </div>
          <el-button>实时面雨量</el-button>
        </div>
      </div>
      <div class="forecast">
        <div class="time">
          <span>日期</span>
          <el-date-picker v-model="value3" style="width:120px" type="date" placeholder="选择日期">
          </el-date-picker>
          <el-time-select v-model="values3" style="width:65px" :picker-options="{
            start: '00:00',
            step: '01:00',
            end: '23:00'
          }" placeholder="选择时间">
          </el-time-select>
          <span>时</span>
        </div>
        <div class="radio1">
          <el-radio v-model="radio" label="1">12小时</el-radio>
          <el-radio v-model="radio" label="2">36小时</el-radio>
          <el-radio v-model="radio" label="3">60小时</el-radio>
          <el-radio v-model="radio" label="4">24小时</el-radio>
          <el-radio v-model="radio" label="5">48小时</el-radio>
          <el-radio v-model="radio" label="6">72小时</el-radio>
        </div>
        <div class="radio2">
          <el-radio v-model="radio" label="1">流域</el-radio>
          <el-radio v-model="radio" label="2">行政区域</el-radio>
        </div>
        <div class="btn">
          <div class="check">
            <el-checkbox v-model="checked3"></el-checkbox>
            <span>列表</span>
          </div>
          <el-button>预报面雨量</el-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      radio: '1',
      value1:"",
      value2:"",
      value3:"",
      values1:"",
      values2:"",
      values3:"",
      checked1:true,
      checked2:false,
      checked3:false,
    }
  }
}
</script>
<style scoped lang="less">
.rainfall_list{
  width: 100%;
  height: 100%;
  font-size: 12px;
  padding-right: 10px;
  box-sizing: border-box;
}
.rainfall_list .query{
  width: 100%;
  border: 1px solid;
  .really{
    width: 100%;
    padding: 20px 10px;
    box-sizing: border-box;
    border: 1px solid;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 10px;
    .btn{
      display: flex;
      width: 200px;
      justify-content: space-between;
      align-items: center;
    }
    .time1,.time2,.radio{
      margin-bottom: 10px;
    }
  }
  .forecast{
    width: 100%;
    padding: 20px 10px;
    box-sizing: border-box;
    border: 1px solid;
    display: flex;
    flex-direction: column;
    align-items: center;
    .radio1{
      width: 250px;
      height: 60px;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      margin-bottom: 10px;
      /deep/ .el-radio{
        margin-right: 0;
      }
    }
    .radio2,.time{
      margin-bottom: 10px;
    }
    .btn{
      display: flex;
      width: 200px;
      justify-content: space-between;
      align-items: center;
    }
  }
}
</style>